<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>全局刷新计算bmi</title>
</head>
<body>
	<!-- <div align="center">
		<form action="" method="GET">
			姓名:<input type="text" name="name"><br/>
			体重:<input type="text" name="t"><br/>
			身高:<input type="text" name="s"><br/>
			操作:<input type="submit" value="计算bmi"><br/>
		</form>
	</div> -->
	<div align='center'>
	<button class="get">get发送请求</button>
	<button class="post">post发送请求</button>

    <button class="btn1">get请求</button>
    <button class="btn2">post请求</button>

	<button class="btn3">请求</button>
	<button class="btn4">post请求</button>

	<p id="nr"></p>
	<p id="rn"></p>
    </div>

	<hr/>

	<div align='center'>
		<button class="key1">get</button>
		<button class="key2">post</button>
	</div>

	<script src="./js/axios.min.js"></script>
	<script>
       //设置axios基地址
       axios.defaults.baseURL = 'http://ajax-base-api-t.itheima.net/'
        
	   //真实地址 = baseURL + url
	   axios.get('api/getbooks',{params:{bookname:'红楼梦'}}).then(res=>{
          console.log(res)
	   })

	</script>

	<script>

		document.querySelector('.key1').addEventListener('click',function(){
			axios.get(
				'http://ajax-base-api-t.itheima.net/api/getbooks',{params:{bookname:'红楼梦'}}
			).then(res=>{
                console.log(res)
			})
		})
		 
		document.querySelector('.key2').addEventListener('click',function(){
			axios.post(
				'http://ajax-api.itheima.net/api/login',{username:'admin',password:'123456'}
			).then(res=>{
				console.log(res)
			})
		})
	// //设置xhr实例对象
	// const xhr =	new XMLHttpRequest()
	
	// //设置请求方法和请求地址
	// xhr.open('get','http://ajax-base-api-t.itheima.net/api/getbooks')

    // //发送请求
	// xhr.send()

    // //注册响应事件
	// xhr.onload = function(){
	// 	console.log(xhr.responseText)
	// }


   /*
	axios使用方式1:
	axios({
		url:'请求路径',
		method:'请求方式',
		params:{get参数},
		data:{post参数}		
	})c
	*/

	/*
	axios使用方式2
	axios.请求方式('请求路径',{params:{get参数}}).then(res=>{})
	*/

    /*axios 使用方式 */
	document.querySelector('.btn1').addEventListener('click',function(){
		var style = prompt('输入书名')
		var control = style
		axios({
           url:'http://ajax-base-api-t.itheima.net/api/getbooks',
		   method:'get',
		   params:{bookname:control}
		}).then(res=>{
			// console.log(res)
			console.log(res.data)
			document.getElementById('rn').innerHTML=res.data
		})
	})

    document.querySelector('.btn2').addEventListener('click',function(){
		axios({
			url:'http://ajax-api.itheima.net/api/login', //地址
			method:'post', //请求方式
			data:{
              username:'admin', //请求参数
			  password:'123456'
			}
		}).then(res=>{
			//成功回调
			console.log(res)
		})
	})

        //    查询选择器
//   document.querySelector('.btn3').addEventListener('click',function(){
//            axios({
// 			   url:'http://ajax-base-api-t.itheima.net/api/getbooks',
// 			   method:'get',
// 	           params:{bookname:'西游记'}
// 		   }).then(res=>{
// 			   console.log(res)
// 		   })
//   })

	document.querySelector('.get').addEventListener('click',function(){
		const xhr = new XMLHttpRequest()
		var code = prompt('请输入你想看的书名')
        var mybook = code
		xhr.open('get','http://ajax-base-api-t.itheima.net/api/getbooks?bookname='+code)
		xhr.send()
		xhr.onload = function(){
			console.log(xhr.response)
			const res = JSON.parse(xhr.responseText)
			// console.log(res)
			document.getElementById('nr').innerHTML=xhr.responseText
		}
	})
	document.querySelector('.post').addEventListener('click',function(){
		//设置xhr实例对象
		const xhr = new XMLHttpRequest()
		//设置请求方法和请求地址
		xhr.open('post','http://ajax-api.itheima.net/api/login')
        //设置固定请求头（只有post才需要）
		xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
		//发送请求
		xhr.send('username=admin&password=123456')
		//注册响应事件
		xhr.onload = function(){
			console.log(xhr.responseText)
			const res = JSON.parse(xhr.responseText)
			console.log(res)
		}
	})
	</script>
</body>
</html>